import SockJS from "sockjs-client";
import Stomp from "stompjs";
import { socketUrl } from '@/constants/url.constants'

import first from '@/assets/home/elevatorStauts/rankings/first.png'
import second from '@/assets/home/elevatorStauts/rankings/second.png'
import third from '@/assets/home/elevatorStauts/rankings/third.png'
import forth from '@/assets/home/elevatorStauts/rankings/forth.png'
import fifth from '@/assets/home/elevatorStauts/rankings/fifth.png'
import starDark from '@/assets/home/elevatorStauts/star_dark.png'
import starLight from '@/assets/home/elevatorStauts/star_light.png'

export const getRankingIcon = (number: number) => {
    const imgWrapperStyle: React.CSSProperties = {
        width: '3rem',
        height: '3rem',
        marginRight: '1rem',
        position: 'relative'
    }

    const imgStyle = {
        width: '100%',
        height: '100%',
    }

    switch (number) {
        case 0: {
            return (
                <div style={imgWrapperStyle}>
                    <img
                        src={first}
                        alt="第一名"
                        style={{ ...imgStyle, position: 'absolute', top: '-0.5rem', width: '200%', height: '200%', right: '-0.9rem' }}
                    />
                </div>)
        }
        case 1: {
            return (
                <div style={imgWrapperStyle}>
                    <img
                        src={second} alt="第二名"
                        style={{ ...imgStyle, position: 'absolute', top: '-0.5rem', width: '200%', height: '200%', right: '-0.9rem' }}
                    />
                </div>
            )
        }
        case 2: {
            return (
                <div style={imgWrapperStyle}>
                    <img
                        src={third}
                        alt="第三名"
                        style={{ ...imgStyle, position: 'absolute', top: '-0.5rem', width: '200%', height: '200%', right: '-0.9rem' }}
                    />
                </div>
            )
        }
        case 3: {
            return (
                <div style={imgWrapperStyle}>
                    <img src={forth} alt="第四名" style={imgStyle} />
                </div>
            )
        }
        case 4: {
            return (
                <div style={imgWrapperStyle}>
                    <img src={fifth} alt="第五名" style={imgStyle} />
                </div>
            )
        }
        default:
            return ''
    }
}

export const getScoreWithLine = (score: number) => {
    const wrapperStyle: React.CSSProperties = {
        display: 'flex',
        alignItems: 'center',
        gap: '1rem'
    }

    const barStyle: React.CSSProperties = {
        height: '0.5rem',
        background: ' linear-gradient(to right, #1890ff, #1ee7e7)',
        width: '14rem',
        borderRadius: '0.3rem'
    }

    const numStyle: React.CSSProperties = {
        fontSize: '1.4rem',
        color: '#e5b2c8'
    }

    return (
        <div style={wrapperStyle}>
            <div style={{ ...barStyle, width: `${score / 100 * 14}rem` }}></div>
            <div style={numStyle}>{score}</div>
        </div>
    )
}

export const getStarLevelIcon = (starLevel: number) => {
    const allStarLevel = [1, 2, 3, 4, 5];
    const wrapperStyle: React.CSSProperties = {
        display: 'flex',
        alignItems: 'center',
    }
    const iconStyle: React.CSSProperties = {
        marginRight: '-1rem',
        width: '4rem'
    }

    return (
        <div style={wrapperStyle}>
            {allStarLevel.map(level => {
                const starIcon = level <= starLevel ? starLight : starDark;

                return <img key={level} src={starIcon} alt='' style={iconStyle} />
            })}
        </div>
    )
}

export const initWebsocket = (elevatorsIntelHardwareNumbers: any[], callback: (arg: any) => void) => {
    const sockjs = new SockJS(socketUrl);
    const stompClient = Stomp.over(sockjs);

    stompClient.heartbeat.outgoing = 20000;
    stompClient.heartbeat.incoming = 10000;
    const header = {
        "Authorization": 'USERda6ad035-8f98-44e3-acd1-67cbd701759f',
    }

    stompClient.connect(header, function connectCallback() {
        stompClient.subscribe(`/camera/昆山大屏`, (rs: any) => {
            console.log('rs====>', JSON.parse(rs.body));
            callback(JSON.parse(rs.body));
        });

        stompClient.send("/subscribeDevice", header, JSON.stringify({ "devList": '298CACD77164B67AE978D8F3' }))
    }, function errorCallBack(error: unknown) {
        console.error(error);
    });
}